<template>
	<view class="beijing1">
		<view class="" id="ggo" style="position: relative; height: 406rpx">
			<u-navbar :placeholder="false" title="我的" @rightClick="rightClick" :autoBack="true" bg-color="transparent" left-icon-size="0"></u-navbar>
			<image src="/static/wobei1.png" mode="" style="width: 100%; height: 406rpx; position: absolute; z-index: 0; top: 0; z-index: 0"></image>
			<view class="" style="position: absolute; z-index: 1; bottom: 40rpx">
				<view class="flex1" style="padding: 0 25rpx; margin-top: 80rpx" @click="ger">
					<image :src="img + shujv.avatar" mode="" style="border-radius: 50%; width: 130rpx; height: 130rpx"></image>
					<view class="column" style="margin-left: 25rpx; justify-content: space-around">
						<text style="font-weight: 400; font-size: 33rpx; color: #222222">{{ shujv.nick }}</text>
						<text style="font-weight: 400; font-size: 33rpx; color: #222222">{{ maskPhoneNumber(state.tel) }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="position: relative">
			<image
				src="/static/beitu.png"
				mode=""
				style="width: 100%; position: absolute; z-index: 0; top: 0; z-index: 0; border-radius: 40rpx 40rpx 0rpx 0rpx"
				:style="{ height: `${gao}px` }"
			></image>
			<view class="" style="position: relative; z-index: 1; padding: 60rpx 50rpx">
				<view class="flex" @click="woded">
					<image src="/static/wodedingdan.png" mode="" style="width: 34rpx; height: 38rpx"></image>
					<text style="margin-left: 27rpx">我的订单</text>
				</view>
				<view class="flex" style="margin-top: 80rpx" @click="woyou">
					<image src="/static/wodeyouhuijvan.png" mode="" style="width: 38rpx; height: 29rpx"></image>
					<text style="margin-left: 27rpx">我的优惠券</text>
				</view>
				<view class="flex" style="margin-top: 80rpx; position: relative">
					<image src="/static/zaixiankefu.png" mode="" style="width: 36rpx; height: 34rpx"></image>
					<text style="margin-left: 27rpx">在线客服</text>
					<button style="position: absolute; width: 100%; height: 100%; top: 0; opacity: 0" open-type="contact">1</button>
				</view>
				<view class="flex" style="margin-top: 80rpx" @click="xieyi('more_coupon')">
					<image src="/static/gengduoyouhui.png" mode="" style="width: 36rpx; height: 36rpx"></image>
					<text style="margin-left: 27rpx">更多优惠</text>
				</view>
			</view>
			<view class="" style="margin-top: 60rpx; position: relative; padding: 0 25rpx">
				<view class="" style="">
					<image src="/static/rewi.png" mode="" style="width: calc(100vw - 50rpx); position: absolute; z-index: 0; height: 200rpx; box-sizing: border-box"></image>
				</view>
				<view class="" style="position: relative; z-index: 1">
					<view class="" style="display: flex; align-items: center; justify-content: flex-end; width: calc(100vw - 50rpx); height: 200rpx">
						<view class="center" style="width: 170rpx; height: 170rpx; background: #6e0c00; border-radius: 10rpx; margin-right: 25rpx">
							<view class="" @click="yv(img + state.peizhi.wx_qrcode)">
								<image :src="img + state.peizhi.wx_qrcode" mode="" style="width: 160rpx; height: 160rpx; background: #ffffff; border-radius: 10rpx"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" style="position: fixed; bottom: -348rpx; right: 0">
				<image src="/static/zhang.png" mode="" style="width: 374rpx; height: 640rpx"></image>
			</view>
		</view>
	</view>
</template>

<script>
import { usergetUserInfo } from '../../untils/api.js';
export default {
	data() {
		return {
			gao: 0,
			shujv: {}
		};
	},
	onLoad(ops) {
		this.jisuan();
	},
	onShow() {
		this.qusergetUserInfo();
	},
	methods: {
		maskPhoneNumber(phoneNumber) {
			if (phoneNumber) {
				const phonePattern = /^(\d{3})(\d{4})(\d{4})$/;

				return phoneNumber.replace(phonePattern, (match, p1, p2, p3) => {
					return `${p1}****${p3}`; // 保留前3位和后4位，替换中间4位为星号
				});
			} else {
				return '';
			}
		},

		async qusergetUserInfo() {
			const data = await usergetUserInfo();
			this.shujv = data.data;
			uni.showToast({
				icon: 'none',
				title: this.shujv,
				duration: 2000
			});
		},
		xieyi(zhi) {
			uni.navigateTo({
				url: `/pagesB/xieyi/xieyi?zhi=${zhi}`
			});
		},
		yv(img) {
			console.log(img);
			uni.previewImage({
				current: 0,
				urls: [img]
			});
		},
		woded() {
			uni.switchTab({
				url: '/pages/wodedingdan/wodedingdan'
			});
		},
		woyou() {
			uni.navigateTo({
				url: '/pagesA/wodeyouhuijvan/wodeyouhuijvan'
			});
		},
		ger() {
			uni.navigateTo({
				url: '/pagesA/gerenxinxi/gerenxinxi'
			});
		},
		rightClick() {
			console.log('rightClick');
		},
		leftClick() {
			console.log('leftClick');
		},
		scrolltolower() {
			console.log('到底了');
		},
		height(selector, callback) {
			uni.createSelectorQuery()
				.in(this) // 使用当前上下文
				.select(selector) // 选择器作为参数
				.boundingClientRect((res) => {
					if (res) {
						console.log(res.height); // 输出高度
						callback(res.height); // 调用回调函数
					} else {
						console.warn(`Element ${selector} not found`);
						callback(0); // 如果元素未找到，返回0或其他默认值
					}
				})
				.exec();
		},
		jisuan() {
			this.$nextTick(() => {
				const info = uni.getSystemInfoSync();
				const ke = info.windowHeight;
				const di = info.safeAreaInsets.bottom;
				let dao = null;
				let tab = null;
				setTimeout(() => {
					this.height('#ggo', (h) => {
						dao = h;
						this.gao = ke - h;
						this.gao1 = this.gao - this.tabg;
					});
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.sl1 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 1;
}
.sl2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 2;
}
.beijing {
	overflow: hidden;
	padding: 0 25rpx;
}
.beijing1 {
	min-height: 100vh;
	background-color: #eadbc5;
	//系统tabbar不要加注释掉
	padding-bottom: env(safe-area-inset-bottom);
	box-sizing: border-box;
}
</style>
